var circleChart = document.getElementById('overlayChart');
var circle = echarts.init(circleChart);
function getData(percent) {
    return [{
        value: percent,
        name: percent,
        itemStyle: {
             normal: {
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00B2EE'
                            }, {
                                offset: 1,
                                color: '#00DDE6'
                            }])
            }
        }
    }, {
        value: 1 - percent,
        itemStyle: {
            normal: {
                color: 'transparent'
            }
        }
    }];
}

placeHolderStyle = {
    normal: {
        label: {
            show: false,
        },
        labelLine: {
            show: false,
        }


    }
};

circleOption = {
    title: {
        text: '2017年准时还款率',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: function(params, ticket, callback) {

            return params.seriesName + ": " + params.name * 100 + "%";
        }
    },
    legend: {
        top: "bottom",
        left: "left",
        itemHeight: 18,
        data: ['第一季度', '第二季度', '第三季度', '第四季度'],
        textStyle: {
            color: '#00B2EE'
        },

        selectedMode: true,
        orient: "vertical",

    },
    grid: {
        top: '5%',
        left: '5%',
        bottom: '5%',
        right: '5%',
    },
    series: [{
        name: '第一季度',
        type: 'pie',
        clockWise: true, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: ['60%', '68%'],
        itemStyle: placeHolderStyle,

        label: {
            normal: {
                show: false,
            }
        },
        data: getData(0.7)
    }, {
        name: '第二季度',
        type: 'pie',
        clockWise: true, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: ['50%', '58%'],
        itemStyle: placeHolderStyle,
        data: getData(0.9)
    }, {
        name: '第三季度',
        type: 'pie',
        clockWise: true, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: ['40%', '48%'],
        itemStyle: placeHolderStyle,
        data: getData(0.8)
    }, {
        name: '第四季度',
        type: 'pie',
        clockWise: true, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: ['30%', '38%'],
        itemStyle: placeHolderStyle,
        data: getData(0.6)
    }, ]
};
circle.setOption(circleOption)